import React from 'react';
import QueueAnim from 'rc-queue-anim';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

class Content extends React.PureComponent {
  render() {
    const { isMobile, ...props } = this.props;
    return (
      <div {...props} className="home-page-wrapper content0-wrapper">
        <div className="home-page content0">
          <div className="title-wrapper">
            <h1>产品与服务</h1>
          </div>
          <OverPack playScale={0.3} className="">
            <QueueAnim
              type="bottom"
              key="block"
              leaveReverse
              component={Row}
              className="content0-block-wrapper"
            >
              <Col key="0" className="content0-block" md={8} xs={24}>
                <div className="content0-block-item">
                  <img className="content0-block-icon" src="/images/WBnVOjtIlGWbzyQivuyq.png" alt="img" />
                  <h1 className="content0-block-title">一站式业务接入</h1>
                  <div>支付、结算、核算接入产品效率翻四倍</div>
                </div>
              </Col>
              <Col key="1" className="content0-block" md={8} xs={24}>
                <div className="content0-block-item">
                  <img className="content0-block-icon" src="/images/YPMsLQuCEXtuEkmXTTdk.png" alt="img" />
                  <h1 className="content0-block-title">一站式事中风险监控</h1>
                  <div>在所有需求配置环节事前风险控制和质量控制能力</div>
                </div>
              </Col>
              <Col key="2" className="content0-block" md={8} xs={24}>
                <div className="content0-block-item">
                  <img className="content0-block-icon" src="/images/EkXWVvAaFJKCzhMmQYiX.png" alt="img" />
                  <h1 className="content0-block-title">一站式数据运营</h1>
                  <div>沉淀产品接入效率和运营小二工作效率数据</div>
                </div>
              </Col>
            </QueueAnim>
          </OverPack>
        </div>
      </div>
    );
  }
}

export default Content;
